<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Grid: Auto-flow Dense Algorithm</title>
        <link rel="author" title="Azul Layout" href="https://azul.rs/" />
        <meta name="flags" content="" />
        <meta name="assert" content="CSS Grid auto-flow dense should fill gaps efficiently." />
        <style type="text/css">
            * { margin: 0; padding: 0; }
            body {
                width: 800px;
                height: 600px;
                padding: 20px;
                background: #0f2027;
            }
            .container {
                display: grid;
                width: 100%;
                height: 560px;
                grid-template-columns: repeat(6, 1fr);
                grid-template-rows: repeat(4, 1fr);
                grid-auto-flow: dense;/* gap: 10px; */ margin-right: 10px; margin-bottom: 10px;
            }
            .item {
                background: #667eea;
                border: 2px solid rgba(255, 255, 255, 0.1);
            }
            .item-large {
                grid-column: span 2;
                grid-row: span 2;
                background: #f093fb;
            }
            .item-wide {
                grid-column: span 3;
                background: #4facfe;
            }
            .item-tall {
                grid-row: span 2;
                background: #43e97b;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item-large"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item item-wide"></div>
            <div class="item"></div>
            <div class="item item-tall"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item item-large"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item item-wide"></div>
            <div class="item item-tall"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </body>
</html>
